<template>
  <div
    :class="['control-panel-box', fcDesigner.screenType]"
    @dragenter="fcDesigner.drag.dragenter"
    @dragover="fcDesigner.drag.dragover"
    @drop="fcDesigner.drag.drop"
  >
    <!-- 上层的框（所有的框，以及每个框的操作功能）（抓住的时候显示） -->
    <div v-if="fcDesigner.dragStatus" class="control-panel panel" />
    <MyForm class="form-panel panel" />
    <!-- 空板 -->
    <div v-if="!hasForm" class="empty-panel panel">拖拽组件或模板到这里</div>
  </div>
</template>

<script lang="ts">
/* 控制板- 盒子 */
export default defineComponent({ name: 'CompControlPanel' })
</script>
<script setup lang="ts">
import { defineComponent, computed } from 'vue'
import MyForm from './MyForm.vue'
import { useFcDesigner } from '../hooks/FcDesigner'

const fcDesigner = useFcDesigner()

const hasForm = computed(() => {
  return fcDesigner.formData.length !== 0
})
</script>

<style lang="scss" scoped>
@import '../styles.scss';
.control-panel-box {
  flex: 1;
  background-color: $d-bg-color;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  position: relative;
  &.PC {
    margin: 20px;
    .panel {
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      position: absolute;
      top: 20px;
      right: 20px;
    }
  }
  &.phone {
    width: 400px;
    margin: 20px auto;
    .panel {
      width: 100%;
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      position: absolute;
      top: 20px;
      right: 20px;
    }
  }

  .control-panel {
    border: 1px dashed $base-active-color;
    background-color: rgba(7, 156, 215, 0.1);
    z-index: 200;
  }
  .form-panel {
    z-index: 100;
    &.dragover {
      border: 1px dashed $base-active-color;
      background-color: rgba(7, 156, 215, 0.1);
    }
  }
  .empty-panel {
    z-index: 100;
    border: 1px solid #ccc;
    background-color: #eee;
    color: $base-placeholder-color;
    display: flex;
    align-items: center;
    justify-content: center;
    &.dragover {
      border: 1px dashed $base-active-color;
      background-color: rgba(7, 156, 215, 0.1);
    }
  }
}
</style>
